<script>
import file from '../../../libs/file'

export default {
  props: {
    column: {
      type: Object,
      default: ''
    },
    value: {
      type: Object,
      default: ''
    },
    /**
     * 用于控制当前行的状态
     * view: 查看状态
     * edit: 编辑状态
     */
    rowStatus: {
      type: String,
      default: 'view'
    },
    /**
     * 是否可以编辑
     */
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      valueData: "",
      valueDataOfEdit: "",
      file: file
    }
  },
  mounted() {
  },
  methods: {
    // 对column进行处理
    newColumn(column) {
      // 如果column.setting不存在，就给它赋值一个空对象
      if (!column.setting) {
        column.setting = {}
      }
      // 如果宽度不存在，就给它赋值一个默认值
      if (!column.setting.width) {
        column.setting.width = '100%'
      }
      // 如果高度不存在，就给它赋值一个默认值
      if (!column.setting.height) {
        column.setting.height = '100%'
      }
      return column
    },
    uploadImg() {


      this.$kt.file.chooseImageOne().then(res => {
        let loading = this.$loading({
          lock: true,
          text: '上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$kt.request.uploadFile({
          file: res.file,
          groupCode: this.column?.setting?.groupCode,
          stateSuccess: (res) => {
            this.valueDataOfEdit = res.data.id;
            this.change();
            loading.close();
          },
          stateFail: (res) => {
            loading.close();
            if (res.stateCode !== 'systemError') {
              this.$message.error(res.errMsg);
            }
          }
        });
      });
    }
  },
  // 监听value的变化
  watch: {
    value: {
      handler(val) {
        this.valueData = val;
      },
      immediate: true
    },
    rowStatus(val) {
      this.valueDataOfEdit = this.valueData;
    },
    valueDataOfEdit(val) {
      this.$emit('change', val);
    }
  }
}
</script>

<template>
  <div class="img-box" v-if="rowStatus==='view'||!column?.isEdit">
    <el-image
        v-if="newColumn(column).setting.type === 'url'"
        :src="valueData"
        fit="cover"
        :preview-teleported="true"
        :preview-src-list="[valueData]"
        style="border-radius: 5px;"
        :style="{width: newColumn(column).setting.width, height: newColumn(column).setting.height}">
    </el-image>

    <el-image
        v-if="newColumn(column).setting.type === 'id'"
        :src="file.visit(valueData)"
        fit="cover"
        :preview-teleported="true"
        :preview-src-list="[file.visit(valueData)]"
        style="border-radius: 5px;"
        :style="{width: newColumn(column).setting.width, height: newColumn(column).setting.height}">
    </el-image>

  </div>


  <div class="img-box" v-if="rowStatus==='edit'&&column?.isEdit">
    <el-image
        v-if="newColumn(column).setting.type === 'url'"
        :src="valueData"
        fit="cover"
        :preview-teleported="true"
        :preview-src-list="[valueDataOfEdit]"
        style="border-radius: 5px;"
        :style="{width: newColumn(column).setting.width, height: newColumn(column).setting.height}">
    </el-image>

    <el-image
        v-if="newColumn(column).setting.type === 'id'"
        :src="file.visit(valueDataOfEdit)"
        fit="cover"
        :preview-teleported="true"
        :preview-src-list="[file.visit(valueDataOfEdit)]"
        style="border-radius: 5px;"
        :style="{width: newColumn(column).setting.width, height: newColumn(column).setting.height}">
    </el-image>
    <div
        class="img-box-bottom"
        @click="uploadImg"
        >
      <div v-if="valueDataOfEdit">上传图片</div>
      <div v-else>修改图片</div>
    </div>
  </div>


</template>

<style lang="scss" scoped>
.img-box {
  position: relative;
  background-color: #f5f7fa;
  cursor: pointer;

  .img-box-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 26px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    line-height: 26px;
    font-size: 10px;
    letter-spacing: 1px;
  }
}

.img-box-bottom:hover {
  font-weight: bold;
}

.img-box-bottom:active {
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.8);
}
</style>